<template>
  <div>
    <section class="player">
      <div class="player__cover">
        <!-- 没有圆角，todo -->
        <van-image :src="toplistData.frontPicUrl" fit="cover" />
      </div>
      <div class="player__info">
        <h2 class="player__info_tit">{{ toplistData.musichallTitle }}</h2>
        <p class="player__info_txt">{{ toplistData.titleDetail }}</p>
        <p class="player__info_desc">
          {{ "更新时间：" + toplistData.updateTime }}
        </p>
      </div>
      <!-- 播放全部音乐的功能需要完成,todo -->
      <a class="player__btn" @click="playAll">
        <li class="el-icon-caret-right" style="font-size: 32px"></li>
      </a>
    </section>
    <!-- 排行榜列表 -->
    <div>
      <div class="count_box">
        <div class="count_box__txt">
          排行榜
          <span class="count_box__num">共100首</span>
        </div>
      </div>
      <ul class="mod_song_list mod_song_list--rank">
        <li
          v-for="(item, index) in toplistData.song"
          :key="index"
          class="song_list__item"
        >
          <div class="song_list__index">
            <span class="song_list__index_num">{{ index + 1 }}</span>
            <span class="song_list__index_change">
              <i class="el-icon-top-right" v-if="item.rankType == 1" />
              <i class="el-icon-bottom-right" v-else />
              {{ item.rankValue }}</span
            >
          </div>
          <div class="song_list__bd" @click="toSong(item)">
            <h3 class="song_list__tit">
              <span class="song_list__txt">{{ item.title }}</span>
            </h3>
            <p class="song_list__desc">{{ item.singerName }}</p>
          </div>
          <!-- 下载 -->

          <a class="song_list__ctrl">
            <li
              class="el-icon-download"
              style="font-size: 20px"
              @click="down(item)"
            ></li>
          </a>
        </li>
      </ul>
    </div>

    <van-overlay :show="loading" >
      <van-loading size="24px" class="center" color="#1989fa">加载中...</van-loading>
    </van-overlay>
  </div>
</template>

<script>
import { getTopDetail } from "@/api/tops";
import { getSongsDetail } from "@/api/songs";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      loading:false,
      toplistData: [],
      songInfoList: [],
    };
  },
  computed: {},
  methods: {
    ...mapMutations([
      "changeShowPlayer",
      "changePlayerState",

      "changeHeaderShow",
      "addSongs",
    ]),
    toSong(item) {
      //console.log(item.mid)
      var songInfo = this.songInfoList.find((a) => a.id == item.songId);
      this.$router.push({ path: "/SongDetail?id=" + songInfo.mid });
    },
    down(song) {
      var songInfo = this.songInfoList.find((a) => a.id == song.songId);
      window.location.href =
        "/reptile/DownMusicFile?mid=" +
        songInfo.mid +
        "&name=" +
        songInfo.name +
        "-" +
        songInfo.singername;
    },
    playAll() {
      //通过调用方法
      console.log("播放全部", this.songInfoList);
      var mids = this.songInfoList.map((a) => {
        return a.mid;
      });
      this.loading=true;
      getSongsDetail(mids).then((res) => {
        console.log("多个请求", res);
        this.addSongs({ songs: res });
        this.loading=false;
        this.$router.push({ path: "/SongDetail?id=" + res[0].songmid });
      });
    },
  },
  created() {
    //console.log('路由传递过来的参数',this.$route.query.id);
    let topID = this.$route.query.id;
    //关闭header
    this.changeHeaderShow({ showTabs: false });
    getTopDetail(topID).then((res) => {
      const { toplistData, songInfoList } = res.data;
      this.toplistData = toplistData;
      this.songInfoList = songInfoList;
      console.log("排行榜", res);
    });
  },
};
</script>

<style>
@import "https://y.gtimg.cn/mediastyle/mobile/app/share/index_v3_a3bfee9a.css?max_age=2592000";
  .center {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
</style>